display:Inline、Block、Inline-Block

前言

display是用來設置每個元素的排版方式，每種元素都有預設的display。
常見的display有:inline、block、inline-block、flex、grid。
在這邊只介紹前三者的差異與用法。

inline

使元素內的文字、圖片皆顯示在同一行。

▼下方圖片是一段文字中間穿插了一個inline元素。

可設定Padding、Margin、但實際上會影響版面的只有水平方向，垂直方向的只有效果並不會影響排版。

padding:10px;

可發現 inline 元素撐開了左右內距
padding top、bottom 則只有覆蓋過了上下的文字。

margin:10px;

inline 元素撐開了相鄰左右的文字，但上下的行距並沒有改變。

設定寬高無效。

width:1000px;
height:1000px;

寬高仍無動於衷XD

無法換行。

多個inline元素排列~

block

元素會以區塊的方式呈現

可設定寬高。

設定Padding、Margin 水平、垂直皆會受到影響。

文字可分行。

元素寬度預設占滿父元素寬度100%

<div class="parent">
  <div class="child"></div>
</div>

.parent
{
  height:200px;
  width:200px;
  background-color: #A3AADE;
  
}
.child
{
  height:70px;
  background-color: pink;
}

子元素在只有設定height的情況下，width直接填滿了父元素的寬~

設定寬度

當我們將寬度設為50px，我們看到的的確是只佔了父元素的一半寬度。

width:50px;

下一個元素只會從下一行排列，並不會接在上一個子元素的旁邊

<div class="parent">
  
  <div class="child">
    子元素 ?
  </div>
  <div class="child2">
    子元素2 ?
  </div>
  
</div>

inline-block

可設定寬高。

水平、垂直的Padding、Margin皆會作用。

下一個inline、inline-block元素可以直接接在後面不用換行，直至總寬度超過父元素大小才會換行

.parent
{
  width:200px;
}
.child
{
  width:80px;
  display:inline-block;
}
.child2
{
  width:80px;
  display:inline-block;
}

將 child2 寬度改成 150
child1 + child2 寬度 = 80 + 150 > 200
所以child2會換行

.parent
{
  width:200px;
}
.child
{
  width:80px;
  display:inline-block;
}
.child2
{
  width:150px;
  display:inline-block;
}

額外 inline-block的間隙問題

在我們正常排版的情況下，元素間會有間隙
是因為inline-block會把換行以及tab認為是一個空白

<div class="parent">
  
  <div class="child">
    子元素 ?
  </div>
  <div class="child2">
    子元素2?
  </div>
</div>

解決方法

讓上一個元素的 ==</ div>== 跟下一個元素的 < div> 黏在一起

<div class="parent">
  <div class="child">
    子元素 ?
  </div><div class="child2">
    子元素2?
  </div>
</div>